<template>
  <div class="login-form">
    <a-form
        :model="formState"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="Username"
          name="username"
          :rules="[{ required: true, message: 'Please input your username!' }]"
      >
        <a-input v-model:value="formState.username">
          <template #prefix>
            <UserOutlined class="site-form-item-icon"/>
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          label="Password"
          name="password"
          :rules="[{ required: true, message: 'Please input your password!' }]"
      >
        <a-input-password v-model:value="formState.password">
          <template #prefix>
            <LockOutlined class="site-form-item-icon"/>
          </template>
        </a-input-password>
      </a-form-item>

      <div class="login-form-wrap">
        <a-space :size="34">
          <a-form-item name="remember" no-style>
            <a-checkbox v-model:checked="formState.remember">记住密码</a-checkbox>
          </a-form-item>
          <a class="login-form-forgot" href="">回到首页</a>
        </a-space>
      </div>
      <br/>

      <a-form-item>
        <a-space size="middle">
          <a-button :disabled="disabled" type="primary" html-type="submit" class="login-form-button">
            Log in
          </a-button>
          Or
          <router-link to="/register">register now!</router-link>
        </a-space>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import {LockOutlined, UserOutlined} from "@ant-design/icons-vue";
import {computed, reactive, ref} from "vue";
import axios from "axios";
import {message} from "ant-design-vue";
import router from "@/router";
import store from "@/store";

export default {
  name: "Login",
  components: {
    UserOutlined,
    LockOutlined,
  },

  setup() {
    const formState = reactive({
      username: '',
      password: '',
      remember: true,
    });

    const loginUser = ref({
      userName: "",
      password: ""
    })

    //登陆方法
    const onFinish = (values) => {
      loginUser.value.userName = values.username;
      loginUser.value.password = values.password;
      // console.log(1,loginUser.value)
      axios.post("http://192.168.10.73:8880/user/login", loginUser.value).then((res) => {
        if (res.data.status === 10000) {
          console.log(res)
          const data = res.data;
          message.success("登陆成功！")
          router.push('/')
          store.commit("setUser", data.content);
        } else {
          onFinishFailed(res.data.msg);
        }
      })
      // console.log('Success:', values);
    };

    const onFinishFailed = errorInfo => {
      message.error(errorInfo);
      formState.username = '';
      formState.password = '';
    };

    //账号密码为空则登陆按钮不可用
    const disabled = computed(() => {
      return !(formState.username && formState.password);
    });
    return {
      formState,
      onFinish,
      onFinishFailed,
      disabled,
    };
  },

}
</script>
<style scoped>
.login-form {
  width: 90%;
  position: absolute;
  top: 30%;
  right: 6%;
  padding: 10px;
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}

#components-form-demo-normal-login .login-form-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#components-form-demo-normal-login .login-form-forgot {
  margin-bottom: 24px;
}

#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>